<template>
  <div :style="styleObj" class="decorate-title">
    <a href="javascript:;" @click="openLink(tplItemData.link)" v-if="tplItemData.version == 1">
      <section :class="['newTitlestyle',(tplItemData.isBorderRadius == 1 || !tplItemData.isBorderRadius )?'borderRadius':'','newTitlestyle'+tplItemData.style]"
          :style="{'background-color':tplItemData.backgroundColor}">
          <template v-if="tplItemData.tpl == 6 && tplItemData.style == 2">
            <div class="tabs-wrap">
              <div class="item-hr" :style="{'fontSize':tplItemData.fontSize + 'px'}">
                <div class="hr"></div>
                <div class="title" :style="{'color': tplItemData.newTitleColor}">{{tplItemData.title }}</div>
              </div>
              <span class="more" v-if="tplItemData.style == 2">查看更多<img src="https://img.wifenxiao.com/h5-wfx/images/diy/title/more.png"/></span>
            </div>
          </template>
          <h2 v-else class="j-title slider-con" :style="{'color':tplItemData.newTitleColor,'fontSize':tplItemData.fontSize + 'px'}">
            {{tplItemData.title }}
            <span class="more" v-if="tplItemData.style == 2 || tplItemData.style == 3">查看更多<img src="https://img.wifenxiao.com/h5-wfx/images/diy/title/more.png"/></span>
          </h2>
      </section>
    </a>
    <a href="javascript:;" @click="openLink(tplItemData.link)" v-else>
        <div :class="['titleBox',boxClassName]" :style="{borderLeftColor:tplItemData.BackgroundColor,...styleObj2}">
          <em v-if="tplItemData.style==='7' || tplItemData.style==='3'" :class="[...emClassName]" :style="{backgroundColor:tplItemData.BackgroundColor || '#ff3e52'}">
          </em>
          <img :src="tplItemData.icon" v-if="(tplItemData.style==='9' || tplItemData.style==='5') && tplItemData.icon && tplItemData.icon !=''">
        <h2 :class="['title',...titleClassName]" :style="styleObj1">{{dataText}}
          <!-- <em v-if="tplItemData.style==='7'?true:false" :class="[...emClassName]" :style="{backgroundColor:tplItemData.BackgroundColor}">
          </em> -->
        </h2>
        <i v-if="tplItemData.style==='5' || tplItemData.style==='9'?true:false"></i>
      </div>
    </a>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        dataText: '这是Data的文字',
        styleObj: {},
        styleObj1: {},
        styleObj2: {},
        titleClassName: [],
        boxClassName: '',
        emClassName: []
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      }
    },
    created() {
      this.dataText = this.tplItemData.title
      this.styleObj.padding = this.tplItemData.modulePadding + 'px ' + this.tplItemData.levelPadding + 'px'
      this.styleObj1.color = this.tplItemData.titleColor
      this.styleObj.textAlign = this.tplItemData.direction
      this.styleObj1.fontSize = this.tplItemData.fontSize + 'px'
      switch (this.tplItemData.style) {
        case 0 :
          this.styleObj2.background = this.tplItemData.bgColor
          break
        case '0' :
          this.styleObj2.background = this.tplItemData.bgColor
          break
        case '1' :
          this.styleObj.textAlign = this.tplItemData.direction
          this.styleObj2.display = 'inline-block'
          this.styleObj2.borderBottom = '1px solid ' + this.tplItemData.BackgroundColor
          break
        case '4' :
          this.titleClassName.push('thinFont')
          break
        case '2' || '6' :
          this.styleObj1.background = '#f9f9f9'
          this.boxClassName = 'border-box3'
          this.titleClassName.push('thinFont')
          break
        case '3' || '7' :
          this.emClassName.push('em1')
          this.titleClassName.push('thinFont')
          this.titleClassName.push('titleStyle7')
          break
        case '9' || '5' :
          this.titleClassName.push('thinFont')
          this.emClassName.push('em2')
          this.titleClassName.push('titleStyle9')
          this.boxClassName = 'border-box4'
          break
        default: return
      }
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .decorate-title{
    // margin: 0 10px;
    a{
      display: block;
    }
    h2{
      display: inline-block;
      position: relative;
      padding: 0 20px;
      font-size: 28px;
      // width: 100%;
    }
    .newTitlestyle{
      h2{
        font-weight: bold;
        display: block;
        .more{
            font-weight: 400;
            img{
                width: 16px;
                vertical-align: middle;
                margin-top: 8px;
            }
        }
      }
      &.borderRadius{
          border-radius: 20px;
      }
      &.newTitlestyle0{ 
          h2{
              padding:0 24px;
              line-height: 92px;
              font-size: 28px;
          }
      }
      &.newTitlestyle1{ 
          h2{
              text-align: center;
              line-height: 85px;
              height: 110px;
              font-size: 32px;
              position: relative;
              &::after{
                  content: '';
                  position: absolute;
                  bottom: 30px;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 142px;
                  height: 4px;
                  background: url(https://img.wifenxiao.com/h5-wfx/images/diy/title/style2_bg.png) center/cover no-repeat;
              }
          }
      }
      &.newTitlestyle2{ 
          h2{
              padding:0 24px 0 42px;
              line-height: 92px;
              font-size: 28px;
              position: relative;
              &::before{
                  content: '';
                  position: absolute;
                  left: 24px;
                  top: 50%;
                  transform: translateY(-50%);
                  width: 6px;
                  height: 28px;
                  background: #F11228;
              }
              .more{
                  position: absolute;
                  right: 24px;
                  top: 50%;
                  transform: translateY(-50%);
                  font-size: 24px;
                  color: #656565;
              }
          }
      }
      &.newTitlestyle3{ 
          h2{
              padding:30px 24px;
              font-size: 32px;
              position: relative;
              text-align: center;
              .more{
                  display: block;
                  margin: 14px auto 0;
                  padding: 9px 0;
                  width: 130px;
                  font-size: 24px;
                  color: #656565;
                  border-radius: 4px;
                  border: 1px solid #656565;
                  img{
                    margin-top: -2px;
                  }
              }
          }
      }
    }
    .titleBox{
      position: relative;
      padding: 20px 0;
    }
    .border-box3{
      overflow: hidden;
      h2{
        padding: 0;
      }
      h2:before,h2:after{
        position: absolute;
        top: 50%;
        right: 110%;
        content: "";
        width: 90px;
        height: 2px;
        background: #999;
      }
      h2:after{
        left: 110%;
      }
    }
    .border-box4{
      // border-bottom: 4px solid #fd5b6b;
      padding: 0;
      display: flex;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
        margin-right: 8px;
        object-fit: cover;
      }
    }
    .title{
      display: inline-block;
      font-weight: 700;
    }
    .titleStyle7{
      height: 32px;
      line-height: 32px;
      padding-left: 20px;
    }
    .titleStyle9{
      height: 50px;
      line-height: 50px;
      // padding-left: 36px;
      padding: 0;
      position: relative;
      font-weight: 900!important;
      em{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 24px;
        width: 24px;
      }
    }
    .thinFont{
      font-weight: normal;
    }
    .em1{
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 24px;
    }
    .em2{
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
    }
    i{
      display: inline-block;
      position: absolute;
      right: 0;
      width: 100px;
      height: 24px;
      top: 50%;
      transform: translateY(-50%);
      background: url(https://img.wifenxiao.com/h5-wfx/images/mob/48title_01.png) no-repeat;
      background-size: 100%;
    }
  }
  .tabs-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    margin: 16px 0;
    .hr {
        background: #999c1f;
        width: 8px;
        margin-right: 16px;
        height: 44px;
        border-radius: 16px;
    }
    .title {
        font-size: 32px;
        font-weight: 500;
        margin-right: 24px
    }
    .sec-time, .item-hr {
      display: flex;
      font-weight: 500;
      align-items: center;
    }
    .more{
      font-weight: 400;
      img{
          width: 16px;
          vertical-align: middle;
          margin-top: -4px;
      }
    }
  }

</style>
